import React, {Component, PureComponent} from 'react';
import Vertex from "./vertex";
import Edge from "./edge";
import $ from "jquery";

let params = {
  zoomVal: 1,
  left: 0,
  top: 0,
  currentX: 0,
  currentY: 0,
  flag: false
};




class CanvasSvg extends Component {
    constructor() {
        super();
    }

    componentDidMount() {
    this.startDrag(
      document.getElementById("img"),
      document.getElementById("img"),
        document.getElementById("scroll")
    );
    $("body").css("overflow", "hidden");
  }

  componentDidUpdate() {
      this.startDrag(
          document.getElementById("img"),
          document.getElementById("img"),
          document.getElementById("scroll")
      );
  }

  componentWillUnmount() {
        $("body").css("overflow", "none");
  }

    //图片缩放
  onWheel = () => {
    params.zoomVal += window.event.wheelDelta / 2000;
    if (params.zoomVal >= 0.1) {
      this.imgDom.style.transform = "scale(" + params.zoomVal + ")";
    } else {
      params.zoomVal = 0.1;
      this.imgDom.style.transform = "scale(" + params.zoomVal + ")";
    }

     return false;

  };

  //获取相关CSS属性
  getCss = (o, key) => {
    return o.currentStyle
      ? o.currentStyle[key]
      : document.defaultView.getComputedStyle(o, false)[key];
  };

  //拖拽的实现
  startDrag = (bar, target, father, callback) => {
    if (this.getCss(target, "left") !== "auto") {
      params.left = this.getCss(target, "left");
    }
    if (this.getCss(target, "top") !== "auto") {
      params.top = this.getCss(target, "top");
    }
    //o是移动对象
      //防止IE文字选中
      father.onselectstart = () => {
          return false;
        };
      // TODO
      bar.onmousedown = event => {
      params.flag = true;
      if (!event) {
        event = window.event;
      }
      let e = event;
      params.currentX = e.clientX;
      params.currentY = e.clientY;
    };

    document.onmouseup = () => {
      params.flag = false;
      if (this.getCss(target, "left") !== "auto") {
        params.left = this.getCss(target, "left");
      }
      if (this.getCss(target, "top") !== "auto") {
        params.top = this.getCss(target, "top");
      }
    };

    document.onmousemove = event => {
      let e = event ? event : window.event;

      if (params.flag) {
        let nowX = e.clientX,
          nowY = e.clientY;
        let disX = nowX - params.currentX,
          disY = nowY - params.currentY;
        // 元素的left 不能超过父元素的-width 与 width
           let fatherWidth;
          let fatherHeight;
          let height_transition;
          fatherWidth = parseInt(window.getComputedStyle(document.getElementById("img")).getPropertyValue("width"), 10);
          fatherHeight = parseInt(window.getComputedStyle(document.getElementById("img")).getPropertyValue("height"), 10);

          fatherWidth = parseInt(fatherWidth / 2 + "");
          fatherHeight = parseInt(fatherHeight / 2+ "");
          height_transition = parseInt(window.getComputedStyle(document.querySelector("body")).getPropertyValue("height")) - fatherHeight * 2;



          let tempLeft = parseInt(params.left, 10) + disX;
          if (tempLeft > -fatherWidth && tempLeft < fatherWidth)
               target.style.left = tempLeft + "px";

          let tempTop = parseInt(params.top, 10) + disY  ;
          if (tempTop > -fatherHeight + height_transition * 1.2 && tempTop < fatherHeight + height_transition * 1.5)
              target.style.top = tempTop + "px";

        if (typeof callback === "function") {
          callback(
            (parseInt(params.left, 10) || 0) + disX,
            (parseInt(params.top, 10) || 0) + disY
          );
        }

        if (event.preventDefault) {
          event.preventDefault();
        }
      }
    };
  };

    render() {


        let off = this.props.offset;




        // window.addEventListener("wheel", this.onWheel, {passive: false})

        if (this.props.reset)

            return (
                <div
                    id = "scroll"

                    style={{
                    width: "100%",
                    height: "100vh",
                    position: "absolute",

                }}
            >
                <svg viewBox="0 0 240 150" xmlns="http://www.w3.org/2000/svg"
                     id="img"
                     border="0"
                        ref={dom => {
                            this.imgDom = dom;
                            }}
                        style={{

                                position: "absolute",


                                height: "100%",

                        }}

                >
                </svg>
            </div>
            )

        return (

                <div
                    id = "scroll"
                onWheel={this.onWheel}

                style={{
                    overflow: "hidden",
                    width: "100%",
                    height: "100vh",
                    position: "relative",
                }}
            >


                <svg viewBox={"0 0 " + this.props.width+ " " + this.props.height} preserveAspectRatio="xMidYMin"   xmlns="http://www.w3.org/2000/svg"
                     id="img"
                     border="0"


                        ref={dom => {
                            this.imgDom = dom;
                            }}
                        style={{
                                position: "relative",
                                width: "100%",
                                height: "80%",
                                cursor: "move",
                        }}

                >

                    {

                        this.props.edges.map((edge, cellidx) => {
                            return (
                                <Edge
                                    // key={vertex.id}
                                    time = {this.props.time}
                                    id={cellidx}
                                    time = {this.props.time}
                                    pos={{ x1: edge.x1, y1: edge.y1,
                                           x2: edge.x2, y2: edge.y2
                                    } }
                                />
                            );
                        })
                    }

                    {
                        this.props.vertices.map((vertex, cellidx) => {
                            return (
                                <Vertex
                                    time = {this.props.time}
                                    // key={vertex.id}
                                    id={cellidx}
                                    current={this.props.setGreenFlag ? vertex.isLeaf :this.props.current === cellidx}
                                    redNumber = {this.props.redNumber}
                                    label={vertex.label}
                                    ret={vertex.val}
                                    pos={{ x: vertex.x, y: vertex.y,
                                          px: vertex.px, py: vertex.py}}
                                    nrFlag = {this.props.nrFlag}
                                />
                            );
                        })
                    }



                </svg>
            </div>


        )
            ;
    }
}

export default CanvasSvg;